<template>
	<view v-if="isRender">
		<view class="user-info">
			<image :src="userImg" style="width: 120rpx; height: 120rpx;"></image>
			<view class="user-name">
				<view class="name-box">
					<view class="name">
						{{userInfo.nickName || 'nickName'}}
					</view>
					<view v-if="userInfo.type =='jd'" style="display: flex;justify-content: flex-start;">
						<view class="node-box">
							<image :src="nodeImg" style="width: 16rpx; height: 16rpx;"></image>
							{{getStr('my.node')}}
						</view>
						<view class="lv-box">
							<view>lv:{{userInfo.level}}</view>
							<view v-if="userInfo.level != 0" v-for="(item,index) in Number(userInfo.level)">
								<image :src="lvImg" style="width: 28rpx; height: 28rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="id-box">
					<view>UID:{{userInfo.telegramId}}</view>
					<up-copy :content="userInfo.telegramId">
						<image :src="copyImg" style="width: 24rpx; height: 24rpx;"></image>
					</up-copy>
				</view>
				<view class="id-box">
					<view>Invitation Code:{{userInfo.inviCode}}</view>
					<up-copy :content="userInfo.inviCode">
						<image :src="copyImg" style="width: 24rpx; height: 24rpx;"></image>
					</up-copy>
				</view>
			</view>
			<!-- <image :src="zwmImg" style="width: 35rpx; height: 35rpx;"></image> -->
		</view>

		<view class="title-box">
			{{getStr('my.totalNumber')}}
		</view>
		<view class="statistics-box">
			<view class="item">
				{{userAccount.balance || 0}}
				<view>{{getStr('my.available')}}</view>
			</view>
			<view class="item">
				{{userAccount.frozenNumber || 0}}
				<view>{{getStr('my.freeze')}}</view>
			</view>
		</view>

		<view class="nav-box">
			<view class="item" @click="goPage('/pages/my/recharge/index')">
				{{getStr('my.recharge')}}
			</view>
			<view class="item" @click="goPage('/pages/my/withdraw/index')">
				{{getStr('my.withdraw')}}
			</view>
		</view>

		<view class="options-box">
			
			<view class="item" v-if="userInfo.type == 'jd'" @click="goPage('/pages/my/combineCards/index')">
				<image src="/static/images1/index/menu-icon-1.png" style="width: 44px; height: 44px;"></image>
				<view>
					{{getStr('my.combineCards')}}
				</view>
				<image :src="rightImg" style="width: 20rpx; height: 20rpx;"></image>
			</view>
			
			<view class="item" v-for="(item,index) in option" @click="goPage(item.path)">
				<image :src="item.img" style="width: 44px; height: 44px;"></image>
				<view>
					{{getStr(item.name)}}
				</view>
				<image :src="rightImg" style="width: 20rpx; height: 20rpx;"></image>
			</view>

			<view class="item" @click="handleLanguage">
				<image src="/static/images1/index/menu-icon-7.png" style="width: 44px; height: 44px;"></image>
				<view>
					{{getStr('my.language')}}
				</view>
				<image :src="rightImg" style="width: 20rpx; height: 20rpx;"></image>
			</view>
		</view>
		
		<view style="height: calc( 148rpx + env(safe-area-inset-bottom));"></view>
		<tabbarVue :current="4"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getUserInfo
	} from '@/common/api/common.js'
	import userImg from '@/static/images1/index/userImg.png'
	import zwmImg from '@/static/images1/index/zwm.png'
	import nodeImg from '@/static/images1/index/node-icon.png'
	import lvImg from '@/static/images1/index/lv-icon.png'
	import copyImg from '@/static/images1/index/copy-icon.png'
	import rightImg from '@/static/images1/index/right-icon.png'
	const isRender = ref(true)
	const userInfo = ref(uni.getStorageSync('userInfo') || {})
	const userAccount = ref(uni.getStorageSync('userAccount') || {})
	
	const option = ref([
		// {
		// 	img: '../../static/images1/index/menu-icon-1.png',
		// 	name: 'my.combineCards',
		// 	path: '/pages/my/combineCards/index'
		// },
		{
			img: '../../static/images1/index/menu-icon-8.png',
			name: 'my.mySetting',
			path: '/pages/my/mySetting/index'
		},
		{
			img: '../../static/images1/index/menu-icon-2.png',
			name: 'my.myBag',
			path: '/pages/my/myBag/index'
		},
		{
			img: '../../static/images1/index/menu-icon-10.png',
			name: 'my.releaseAds',
			path: '/pages/my/releaseAds/buy'
		},
		{
			img: '../../static/images1/index/menu-icon-4.png',
			name: 'my.detailOfAssets',
			path: '/pages/my/detailOfAssets/index'
		},
		{
			img: '../../static/images1/index/menu-icon-5.png',
			name: 'my.myTeam',
			path: '/pages/my/myTeam/index'
		},
		{
			img: '../../static/images1/index/menu-icon-3.png',
			name: 'my.myRelease',
			path: '/pages/my/myRelease/index'
		},
		{
			img: '../../static/images1/index/menu-icon-9.png',
			name: 'my.myMealCard',
			path: '/pages/my/myMealCard/index'
		},
		// {
		// 	img: '../../static/images1/index/menu7.png',
		// 	name: 'Language',
		// }
	])

	const handleLanguage = () => {
		if (uni.getStorageSync('locale') == 'zh') {
			uni.setStorageSync('locale', 'en')
		} else {
			uni.setStorageSync('locale', 'zh')
		}
		setIsRender()
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}

	const getUserInfoFn = async () => {
		const res = await getUserInfo({
			telegramId: uni.getStorageSync('telegramId')
		})
		if (res.code == 200) {
			uni.setStorageSync('userInfo', res.data.user)
			uni.setStorageSync('userAccount', res.data.userAccount)
			userInfo.value = res.data.user
			userAccount.value = res.data.userAccount
		}
	}
	
	const confirm = (e) => {
		console.log(e)
	}

	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	onLoad((options) => {
		console.log(options)
		getUserInfoFn()
	})

	onShow(() => {
		uni.$tg.hideButton()
		setIsRender()
		getUserInfoFn()
	})
</script>

<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.user-info {
		padding: 0 28rpx 0;
		padding-top: calc(var(--status-bar-height) + 44rpx); //顶部安全区高度
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user-name {
			width: calc(100% - 100rpx - 20rpx);
			margin-left: 20rpx;
			color: #ffffff;

			.name-box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					font-size: 34rpx;
					font-weight: 500;
				}

				.node-box {
					width: 72rpx;
					height: 36rpx;
					background: linear-gradient(90deg, #30272A 0%, #DAA8B7 100%);
					border-radius: 12rpx;
					font-size: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 20rpx 0 10rpx;
				}

				.lv-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					view {
						margin-right: 5rpx;
					}
				}
			}

			.id-box {
				color: #999999;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				view {
					margin-right: 15rpx;
				}
			}
		}
	}

	.title-box {
		padding: 54rpx 28rpx 24rpx;
		color: #ffffff;
	}

	.statistics-box {
		width: calc(100vw - 28rpx - 28rpx);
		height: 170rpx;
		background: linear-gradient(90deg, #30272A 0%, #DAA8B7 100%);
		border-radius: 28rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;

		.item {
			width: 50%;
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;

			view {
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}
	}

	.nav-box {
		width: calc(100vw - 28rpx - 28rpx);
		height: 80rpx;
		margin: 28rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item {
			width: calc(50% - 10rpx);
			height: 80rpx;
			background: linear-gradient(90deg, #30272A 0%, #DAA8B7 100%);
			text-align: center;
			font-size: 36rpx;
			color: #FFFFFF;
			border-radius: 28rpx;
			line-height: 80rpx;
		}
	}

	.options-box {
		width: calc(100vw - 28rpx - 28rpx);
		// height: 80rpx;
		margin: 56rpx auto 0;

		.item {
			width: 100%;
			height: 108rpx;
			background-color: #262930;
			color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 28rpx;
			padding: 0 24rpx 0 17rpx;
			box-sizing: border-box;
			margin-bottom: 16rpx;

			view {
				width: calc(100% - 88rpx - 20rpx - 20rpx);
				margin-left: 20rpx;
			}
		}
	}
</style>